<template>
  <div class="mike-promotion-recommend-banner">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <sn8-select
          :sn8.sync="dataForm.sn8"
          @change="getDataList"/>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="clickOnBannerAdd"
          type="primary">
          <i class="el-icon-setting"/>
          {{ $t('manage') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="dataList"
      @selection-change="dataListSelectionChangeHandle"
      style="width: 100%;"
      v-loading="dataListLoading"
    >
      <!--      <el-table-column-->
      <!--        align="center"-->
      <!--        header-align="center"-->
      <!--        type="selection"-->
      <!--        width="50"-->
      <!--      ></el-table-column>-->

      <el-table-column
        :label="$t('mike.img')"
        align="center"
        header-align="center"
        prop="picUrl"
        width="80"
      >
        <template slot-scope="scope">
          <div
            class="text-center is-align-middle is-justify-center el-row--flex"
          >
            <midea-admin-image
              :height="60"
              :previewable="true"
              :url="scope.row.picUrl"
              :width="60"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('model.name')"
        align="center"
        header-align="center"
        prop="name"
      />
      <el-table-column
        :label="$t('news.content')"
        align="center"
        header-align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.showTypes === 0">
            {{ scope.row.abstruct }}
          </span>

          <span v-if="scope.row.showTypes === 1">
            {{ scope.row.abstruct }}
          </span>
          <span v-if="scope.row.showTypes === 2">
            <a
              :href="scope.row.picUrl2"
              target="_blank">{{
                scope.row.picUrl2
              }}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('menu.type')"
        align="center"
        header-align="center"
        prop="showTypes"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.tagType">{{ scope.row.tagName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('menu.sort')"
        align="center"
        header-align="center"
        prop="firstScreen"
      >
        <template slot-scope="scope">
          <div
            @click="clickOnEditSort(scope.row)"
            class="banner-sort common-table-sort-edit"
          >
            <span>{{ scope.row.firstScreen }}</span>
            <i class="el-icon-edit-outline"/>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('handle')"
        align="center"
        fixed="right"
        header-align="center"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            @click="clickOnDelete(scope.row)"
            size="small"
            type="danger"
            plain
          >
            <i class="el-icon-circle-close-outline"/>
            {{ $t("delete") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
      layout="total, sizes, prev, pager, next"
    />

    <mike-banner-select
      ref="bannerSelect"
      v-if="bannerSelectVisible"
      @refreshDataList="getDataList"
    />

    <sort-edit-dialog
      ref="sortEdit"
      @refreshDataList="getDataList"
      v-if="sortEditVisible"
    />
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
import MikeBannerSelect from './mike.banner.select'
import SortEditDialog from '../../../components/mike/sortEditDialog'
import { MikeBannerType } from '../../../utils/consts'
import Sn8Select from '@/components/sn8.select'

export default {
  name: 'MikePromotionRecommendBanner',
  components: { Sn8Select, SortEditDialog, MikeBannerSelect },
  mixins: [mixinViewModule],

  data () {
    return {
      bannerSelectVisible: false,
      sortEditVisible: false,
      activatedIsNeed: true,
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/collection/content/getrecommendall',
        getDataListIsPage: true
        // getDataListIsPage: true
        // deleteURL: '/midea/menu/collection/content/del/'
        // deleteIsBatch: true
        // exportURL: '/sys/user/export'
      },
      dataForm: {
        sn8: ''
      }
    }
  },
  mounted () {
    // this.getDataList()
  },
  methods: {
    sn8Changed (sn8) {
      this.dataForm.sn8 = sn8
      this.getDataList()
    },
    clickOnDelete (model) {
      this.$confirm(
        this.$t('prompt.info', { handle: this.$t('delete') }),
        this.$t('prompt.title'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.removeFromBanner(model).then(() => {
          this.getDataList()
        })
      })
    },

    clickOnEditSort (model) {
      this.sortEditVisible = true
      this.$nextTick(() => {
        let url = ''
        switch (model.showTypes) {
          case MikeBannerType.Recipe:
            url = 'midea/menu/collection/content/menu/recommendSort/{id}/{sort}'
            break
          case MikeBannerType.Collection:
            url = 'midea/menu/collection/content/collections/recommendSort/{id}/{sort}'
            break
          case MikeBannerType.Activity:
            url = 'midea/menu/piclink/set/recommend/{sort}/{id}'
            break
          default:
            break
        }
        this.$refs.sortEdit.requestUrl = url
        this.$refs.sortEdit.form.name = model.name
        this.$refs.sortEdit.form.id = model.id
        this.$refs.sortEdit.form.value = model.firstScreen
        this.$refs.sortEdit.init()
      })
    },
    handleResponseListData (data) {
      data = data.map(item => {
        item.tagType =
          item.showTypes === 0 ? '' : item.showTypes === 1 ? 'warning' : 'info'

        item.tagName =
          item.showTypes === 0
            ? '菜谱'
            : item.showTypes === 1
              ? '合集'
              : '活动链接'
        return item
      })
      return data
    },
    clickOnBannerAdd () {
      this.bannerSelectVisible = true
      this.$nextTick(() => {
        this.$refs.bannerSelect.init()
        this.$refs.bannerSelect.sn8 = this.dataForm.sn8
      })
    }
  }
}
</script>

<style scoped></style>
